<template>
	<view class="container">
		<!-- 添加任务 -->
		<view class="add-task">
			<input v-model="newTask" placeholder="请输入任务" />
			<button @click="addTask">添加</button>
		</view>

		<!-- 任务列表 -->
		<scroll-view class="task-list" scroll-y>
			<view v-for="task in filteredTasks" :key="task.id" class="task-item">
				<checkbox @click="complteTask(task.id)" :checked="task.completed"></checkbox>
				<text :class="{ completed: task.completed }">{{ task.title }}</text>
				<view @click="removeTask(task.id)" class="delete iconfont icon-delete "></view>
			</view>
		</scroll-view>

		<!-- 筛选任务 -->
		<view class="filters">
			<button @click="filter = 'all'" :class="{active:filter==='all'}">全部</button>
			<button @click="filter = 'active'" :class="{active:filter==='active'}">未完成</button>
			<button @click="filter = 'completed'" :class="{active:filter==='completed'}">已完成</button>
		</view>
	</view>
</template>


<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';

	const filter = ref('all');
	const newTask = ref('');
	const tasks = ref([{
			id: 1,
			title: '喝水',
			completed: true
		},
		{
			id: 2,
			title: '读书',
			completed: false
		},

	]);

	//新增任务
	const addTask = () => {
		let newId = Date.now();
		if (!newTask.value.trim()) {
			uni.showToast({
				title: '任务内容不能为空',
				duration: 2000
			});
			return;
		}
		if (tasks.value.find(e => e.title === newTask.value.trim())) {
			uni.showToast({
				title: '任务已存在',
				duration: 2000
			});
			return;
		}

		tasks.value.push({
			id: newId,
			title: newTask.value,
			completed: false
		});
		newTask.value = '';
	}

	//完成任务
	const complteTask = id => {
		let task = tasks.value.find(e => e.id === id);
		task.completed = !task.completed;
	}

	//删除任务
	const removeTask = id => {
		tasks.value = tasks.value.filter(e => e.id !== id);
	}

	// 筛选任务
	const filteredTasks = computed(() => {
		if (filter.value === 'active') {
			return tasks.value.filter((task) => !task.completed);
		} else if (filter.value === 'completed') {
			return tasks.value.filter((task) => task.completed);
		}
		return tasks.value;
	});
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column; // 垂直布局
		height: 100vh; // 让容器充满整个视窗
		background-image: none;

		.add-task {
			display: flex;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			padding-left: 20rpx;

			input {
				flex: 1; // 输入框占满剩余空间
				margin-right: 10rpx;
			}

			button {
				margin-right: 20rpx;
				background-color: #12a112;
			}
		}

		.task-list {
			flex: 1; // 任务列表占据剩余的高度
			overflow-y: auto; // 启用垂直滚动


			.task-item {
				display: flex;
				align-items: center; // 垂直居中
				padding: 10rpx;
				border-bottom: 1px solid #ccc;
				margin-bottom: 30rpx; // 增大列表项之间的间距

				checkbox {
					margin-right: 10rpx; // 任务项和复选框的间距
				}

				.completed {
					flex: 1; // 任务标题占满剩余空间
					text-decoration: line-through;
					color: gray;
				}

				.delete {
					margin-left: auto; // 删除按钮靠右
					color: red;
					font-size: 30rpx;
					cursor: pointer;
					display: flex;
					align-items: center; // 居中对齐图标
				}
			}
		}

		.filters {
			display: flex;
			justify-content: space-around; // 按钮水平等距排列
			padding: 10rpx;
			background-color: #f5f5f5;
			position: sticky; // 或者 fixed
			bottom: 100rpx; // 固定在底部
			left: 0;
			width: 100%;
			box-shadow: 0 -2rpx 5rpx rgba(0, 0, 0, 0.1);

			button {

				border: none;
				background-color: #007aff;
				color: white;

				&:hover {
					background-color: #005bb5;
				}
			}

			.active {
				background-color: #004a94;
			}
		}
	}
</style>